<script setup>
import { onMounted, reactive, ref } from 'vue';
import { editmaintainApi, addmaintainApi,getmaintainInfoApi ,getlistApi} from '../../../api/maintain'
import ImageUpload from '../../../components/ZXSimg'
import { getcommunityApi } from '../../../api/notice'
import { ElMessage } from "element-plus";
const emit = defineEmits(["updateList"]);
const drawer = ref(false)
const formRef = ref()
const communityList = ref([])
const deviceList = ref([])
const formData = reactive({
    community_code: '',
    next_maintain_time: '',
    last_maintain_time: '',
    device_code: '',
    title: '',
    contacts: '',
    contacts_tel: '',
    photo: '',
    remark: '',
    unit: '',
})

// 获取小区信息列表
const initData = async () => {
    let { data } = await getcommunityApi()
    // console.log(data);
    communityList.value = data
}
// 获取小区信息列表
const change = async (val) => {
    let { data } = await getlistApi({community_code:val})
    console.log(data);
    deviceList.value = data
}

const formRules = {
    community_code: [{ required: true, message: "请输入", trigger: "change" }],
    device_code: [{ required: true, message: "请输入", trigger: "blur" }],
    contacts: [{ required: true, message: "请输入", trigger: "blur" }],
    contacts: [{ required: true, message: "请输入", trigger: "blur" }],
    contacts_tel: [{ required: true, message: "请输入", trigger: "blur" }],
    unit: [{ required: true, message: "请输入", trigger: "blur" }],
    next_maintain_time: [{ required: true, message: "请输入", trigger: "blur" }],
    last_maintain_time: [{ required: true, message: "请输入", trigger: "blur" }],
};
// 关闭事件
const closeHandler = () => {
    // 移除校验
    formRef.value.resetFields()
    // 重置表单数据
    Object.assign(formData, {
        community_code: '',
        next_maintain_time: '',
        last_maintain_time: '',
        device_code: '',
        title: '',
        contacts: '',
        contacts_tel: '',
        photo: '',
        remark: '',
        unit: '',
        id:null
    })
}
//  新增事件
const onsubmit = async () => {
    try {
        await formRef.value.validate()
        const data = toRaw(formData)
        // console.log(data);
        data.id ? await editmaintainApi(data) : await addmaintainApi(data)
        ElMessage.success('操作成功')
        drawer.value = false
        emit('updateList')
    } catch (error) {
        console.log(error);
    }
}
// 回显事件
const replyData = async (id) => {
  // console.log(id);
  const res = await getmaintainInfoApi(id)
  // console.log(res);
  Object.assign(formData, res.data)
  drawer.value = true
}
// 标题
const title = computed(() => {
  return formData.id ? '修改维修记录' : '新增广告维修记录'
})
defineExpose({
    drawer,replyData
});
onMounted(() => {
    initData()
   
})
</script>

<template>
    <el-drawer v-model="drawer" size="50%" with-header :title="title" @close="closeHandler">
        <el-form :model="formData" :rules="formRules" ref="formRef" label-width="120px" label-position="top"
            :inline="false">
            <el-row :gutter="20">

                <el-col :span="10">
                    <el-form-item label="小区编号" prop="community_code" >
                        <el-select v-model="formData.community_code" clearable @change="change">
                            <el-option v-for="item in communityList" :key="item.id" :label="item.name"
                                :value="item.code"></el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="10">
                    <el-form-item label="设备名称" prop="device_code">
                        <el-select v-model="formData.device_code" clearable>
                            <el-option v-for="item in deviceList" :key="item.id" :label="item.name"
                                :value="item.code"></el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row :gutter="20">
                <el-col :span="10">
                    <el-form-item label="维修单位名称" prop="unit">
                        <el-input v-model="formData.unit" placeholder="请输入"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="10">
                    <el-form-item label="维修人名称" prop="contacts">
                        <el-input v-model="formData.contacts" placeholder="请输入"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row :gutter="20">
                <el-col :span="10">
                    <el-form-item label="维修人联系方式" prop="contacts_tel">
                        <el-input v-model="formData.contacts_tel" placeholder="请输入"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="10">
                    <el-form-item label="最后一次维修时间" prop="last_maintain_time">
                        <div class="block">

                            <el-date-picker v-model="formData.last_maintain_time" type="date" placeholder="请选择"
                                :size="size" value-format="x" />
                        </div>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row :gutter="20">
                <el-col :span="10">
                    <el-form-item label="下次维护时间" prop="next_maintain_time">
                        <div class="block">

                            <el-date-picker v-model="formData.next_maintain_time" type="date" placeholder="请选择"
                                :disabled-date="disabledDate" :shortcuts="shortcuts" :size="size" value-format="x" />
                        </div>
                    </el-form-item>
                </el-col>
                <el-col :span="10">
                    <el-form-item label="备注" prop="remark">
                        <el-input v-model="formData.remark" type="textarea" placeholder="请输入内容"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>

            <el-row>
                <el-col>
                    <el-form-item label="售后图片" prop="photo">
                        <ImageUpload v-model="formData.photo" :type="'maintain'" :limit="1"></ImageUpload>
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>
        <template #footer>
            <div style="flex: auto">
                <el-button size="large" @click="drawer = false">取消</el-button>
                <el-button size="large" type="primary" @click="onsubmit">确定</el-button>
            </div>
        </template>
    </el-drawer>
</template>

<style scoped></style>